<!--
 * @Author: your name
 * @Date: 2021-09-24 17:54:18
 * @LastEditTime: 2021-09-25 14:45:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\system\account\component\formModel.vue
-->
<template>
    <Form
        ref="ruleForm"
        :model="froms"
        :rules="rules"
        @validate="onSubmit"
    >
        <FormItem label="名称" name="name">
            
            <AInput v-model:value="froms.name" placeholder="Username"> </AInput>
        </FormItem>
        <FormItem label="邮箱" name="email">
            <AInput v-model:value="froms.email" placeholder="email"> </AInput>
        </FormItem>

        <FormItem label="状态" name="delivery">
            <Switch :checked="froms.delivery" @change="onSwitch"></Switch>
        </FormItem>
        <FormItem label="权限" name="type">
            <ARadioGroup v-model:value="froms.type" @change="onChange">
                <ARadio :value="1"> Super </ARadio>
                <ARadio :value="2"> test </ARadio>
            </ARadioGroup>
        </FormItem>

        <FormItem>
            <Button type="primary" block @click="onSubmit"> 保存 </Button>
            <Button
                style="margin-top: 10px"
                type="primary"
                block
                @click="onReflash"
            >
                重置
            </Button>
        </FormItem>
    </Form>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch } from 'vue'
import { Form, Switch, Button } from 'ant-design-vue'

interface Rulefrom {
  name: String;
  delivery: Boolean;
  type: any;
  email: String;
}
export default defineComponent({
    name: 'FromModel',
    components: {
        Form,
        Switch,
        Button,
        FormItem: Form.Item,
    },
    props: {
        infos: {} as Rulefrom,
    },
    emits: {
        handleCall: null,
    },
    setup(props, { emit }) {
        let ruleForm = ref<any>(null)
        // 响应式reactive  不用使用torefs
        // 初始化表单数据
        let froms = reactive<Rulefrom>({
            name: '',
            delivery: true,
            type: 1,
            email: '',
        })
        let { name, delivery, type, email } = props.infos
        froms.name = name
        froms.delivery = delivery
        froms.type = type
        froms.email = email
        // 监听数据变化
        watch(
            () => props.infos,
            () => {
                let obj = JSON.parse(JSON.stringify(props.infos))
                let { name, delivery, type, email } = obj
                froms.name = name
                froms.delivery = delivery
                froms.type = type
                froms.email = email
            },
        )
        //    表单验证
        let rules = {
            name: [
                {
                    required: true,
                    message: 'Please input Activity name',
                    trigger: 'blur',
                },
                {
                    min: 3,
                    max: 10,
                    message: 'Length should be 3 to 5',
                    trigger: 'blur',
                },
            ],
            email: [
                {
                    required: true,
                    message: 'Please select activity resource',
                    trigger: 'change',
                },
            ],
        }
        // 保存- 都已经配置完成 只需要 发送请求即可
        const onSubmit = () => {
            // 在vue3中validate 使用Promise回调
            ruleForm.value
            ?.validate()
            .then((res) => {
                //   成功后自动调用res
                emit('handleCall', froms)
            })
            .catch((err) => {
                //   表单错误
                console.log(err.outOfDate)
            })
        }
        // 重置
        const onReflash = () => {
            ruleForm.value?.resetFields()
        }
        // 更改权限
        const onChange = (e) => {
            froms.type = e.target.value
        }
        // 更改状态
        const onSwitch = (e) => {
            froms.delivery = e
        }
        return {
            froms,
            rules,
            ruleForm,
            onSubmit,
            onReflash,
            onChange,
            onSwitch,
        }
    },
})
</script>

<style></style>
